<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 400px;height: 500px;border: solid 1px black;margin: 0 auto}
        .cont{height: 400px;border-bottom: solid 1px black;overflow: auto;}
        .cont div{border-radius: 10px;padding: 10px;margin: 10px;max-width: 240px;clear: both;}
        .cont div:nth-child(2n){background: greenyellow;float: left;}
        .cont div:nth-child(2n-1){background: #66f;float: right;}
    </style>
</head>
<body>
    <div id="box">
        <div class="cont">
        </div>
        <form>
            <textarea id="txt"></textarea>
            <input type="button" value="发送" id="btn">
        </form>
    </div>
</body>
<script>
    var otxt = document.getElementById('txt');
    var obtn = document.getElementById("btn");
    var ocont = document.querySelector(".cont");

    obtn.onclick = function(){
        // 创建元素
        var div = document.createElement("div");
        // 设置内容
        div.innerHTML = otxt.value;
        // 添加到指定区域
        ocont.appendChild(div);
        // 清空输入框
        otxt.value = "";

        ocont.scrollTop = ocont.scrollHeight
    }
</script>
</html>